<%--
  Created by IntelliJ IDEA.
  User: 29265
  Date: 2024/6/6
  Time: 11:29
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>从左上角到右下角的文本</title>
    <style>
        body {
            margin: 0;
            padding: 0;
            height: 100vh; /* 使body占据整个视口高度 */
            display: flex;
            /* justify-content: center; /* 水平居中  */
            align-items: flex-start; /* 垂直顶部对齐 */
            overflow-x: hidden; /* 隐藏横向溢出的内容 */
        }

        .diagonal-text-container {
            position: relative;
            top: 100%; /* 容器定位到视口高度的中点 */
            transform: translateY(-50%) rotate(-45deg); /* 向上平移自身高度的一半并旋转45度 */
            transform-origin: top left; /* 旋转的基准点是左上角 */
            writing-mode: vertical-rl; /* 垂直方向从右到左书写（可选，取决于你想要的文本方向） */
        }

        .diagonal-text {
            /* 你可以在这里添加样式来美化文本，比如字体、颜色、行高等 */
            margin-left: 35%;
            font-size: 3rem;
            color: #333;
            line-height: 1.5;
        }
    </style>
</head>
<body>
<div class="diagonal-text-container">
    <p class="diagonal-text">
        ENGLISHWORDSSTUDYSYSTEM
    </p>
</div>
</body>
</html>
